import { useState, useMemo } from 'react';
import { Card, Button, Divider, Typography } from 'antd';

import { Parent } from './components/useImperativeHandle';

import CodeEditor from './CodeEditor';

const { Title } = Typography;

function SumComponent() {
  const [maxNumber, setMaxNumber] = useState(10000000);
  const [maxKey, setMaxKey] = useState(10000000);
  const [count, setCount] = useState(0);

  const maxKeySum = () => {
    console.log('maxKey Calculating sum...');
    let sum = 0;
    for (let i = 1; i <= maxKey; i++) {
      sum += i;
    }
    return sum;
  };

  const maxNumberSum = useMemo(() => {
    console.log('maxNumber Calculating sum...');
    let sum = 0;
    for (let i = 1; i <= maxNumber; i++) {
      sum += i;
    }
    return sum;
  }, [maxNumber]);

  return (
    <>
      <CodeEditor />
      <div>
        <Title>React Hooks 系列 之 useReducer</Title>
        <div>
          useReducer 是一个用于管理组件状态的 Hook。它与 Redux 中的 reducer 非常相似，但是它是为
          React 组件设计的。与 useState 相比，useReducer 更适合管理
          <span style={{ color: 'red' }}>复杂逻辑</span>的状态(个人在实际开发中用的较少)。
        </div>
        <Title>React Hooks 系列 之 useCallback</Title>
        <br />
        useCallback ，它可以帮助我们{' '}
        <span style={{ color: 'red' }}>避免因为函数的重新创建而导致的不必要的重新渲染。</span>
        <br />
        跳过组件的重新渲染:
        当你优化渲染性能的时候，有时需要缓存传递给子组件的函数。例如，当你传递一个函数给一个被 memo
        包裹的子组件时，useCallback 可以确保函数在多次渲染中保持不变，除非它的依赖发生改变。
      </div>
      <Title>React Hooks 系列 之 useMemo</Title>
      <div>
        useMemo 是 React 的一个 Hook，它用于 <span style={{ color: 'red' }}>优化性能</span>
        ，特别是在组件重新渲染时。当组件的某些状态或属性发生变化时，useMemo 可以帮助我们{' '}
        <span style={{ color: 'red' }}>避免不必要的计算或渲染</span>。
      </div>
      <div>参考链接：https://skillgroup.cn/framework/react/hooks/use-callback.html</div>
      <Card title="案例 demo" extra={<span>在控制台查看打印结果</span>}>
        <p>最大数字 maxKey: {maxKey}</p>
        <p>
          从 1 到 {maxKey} 的数字之和是: {maxKeySum()}
        </p>
        <Button onClick={() => setMaxKey(maxKey - 100)} type="primary">
          maxKey - 100
        </Button>

        <Divider>使用 useMemo</Divider>
        <p>最大数字 maxNumber: {maxNumber}</p>
        <p>
          从 1 到 {maxNumber} 的数字之和是: {maxNumberSum}
        </p>
        <Button onClick={() => setMaxNumber(maxNumber - 100)} type="primary">
          maxNumber - 100
        </Button>

        <Divider>无关按钮</Divider>
        <p>Count 按钮点击次数：{count}</p>
        <Button type="primary" onClick={() => setCount(count + 1)}>
          Count + 1
        </Button>
      </Card>
      <Parent />
    </>
  );
}

export default SumComponent;
